<template>
    <div class="example">
        <div class="item" v-for="(item, index) in exampleList" :key="index" @tap="toPath(item.path)">
            <image class="img" :src="item.imgUrl"/>
            <span class="name">{{item.name}}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Example',
  data () {
    return {
      exampleList: [
        {
          imgUrl: '../../static/images/picture.png',
          name: '上传图片',
          path: '/pages/issue/main'
        }, {
          imgUrl: '../../static/images/tab.png',
          name: '导航',
          path: '/pages/navBar/main'
        }, {
          imgUrl: '../../static/images/gesture.png',
          name: '手势密码',
          path: '/pages/gesture/main'
        }, {
          imgUrl: '../../static/images/game.png',
          name: '小游戏',
          path: '/pages/stone/main'
        }
        // {
        //   imgUrl: '../../static/images/JinYong.png',
        //   name: '倚天屠龙记',
        //   path: '/pages/swordsMan/main'
        // }
      ]
    }
  },
  methods: {
    toPath (path) {
      wx.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.example
    display flex
    justify-content flex-start
    align-items flex-start
    flex-wrap wrap
    width 690rpx
    padding 30rpx
    .item
        width 165rpx
        display flex
        flex-direction column
        justify-content flex-start
        align-items center
        margin 0 10rpx 40rpx 0
        &:nth-of-type(4n+0)
            margin 0 0 40rpx 0
        .img
            width 100rpx
            height 100rpx
            margin-bottom 20rpx
        .name
            font-size 26rpx
            color #ED758D
            line-height 40rpx
</style>
